<template>
  <el-card class="infoContainer">
    <el-form :model="info">

      <!-- 个人资料的头部 -->
      <div class="header">
        <img class="headerImg" :src="userInfoStore.userInfo.avatar">
        <div class="headerWord">点击更换</div>
      </div>
      <!-- 个人资料的信息部分 -->
      <div class="middle">
        <!-- 左侧 -->
        <ul class="leftInfo">
          <li>
            <span> 用户名 :</span>
            <el-input v-model="userInfoStore.userInfo.account" class="infoInput" maxlength="11" show-word-limit
              type="text" />
          </li>
          <li>
            <span>性别:</span>
            <el-button v-model="info.gender" :class="{ active: info.gender === 'm' }" @click="changeGender"
              size="default">男
            </el-button>
            <el-button v-model="info.gender" :class="{ active: info.gender === 'f' }" @click="changeGender"
              size="default">女
            </el-button>
          </li>
          <li class="level">
            <span>成长等级 :</span>
            <div class="lv">Lv.2</div>
          </li>
        </ul>
        <!-- 右侧 -->
        <ul class="leftInfo infoRightStyle">
          <li>
            <span> 生日 :</span>
            <div class="demo-date-picker">
              <div class="block">
                <el-date-picker v-model="info.Birthday" type="date" placeholder="选择日期" size="default"
                  props="{expandTrigger:hover}" />
              </div>
            </div>
          </li>
          <li>
            <span>城市:</span>
            <!-- 级联选择器 -->
            <div class="example-block">
              <el-cascader v-model="value" :options="options" :props="options" />
            </div>
          </li>
          <li>
            <span>技能水平 :</span>
            <el-select v-model="userSkill" placeholder="请选择">
              <el-option v-for="(skill, index) in informationStore.Skill" :key="index" class="skillSelect"
                :label="skill.data.name" :value="skill.data.desc">
                <span class="skillOne">{{ skill.data.name }}</span>
                <span class="skillTwo">{{ skill.data.desc }}</span>
              </el-option>
            </el-select>
            <el-icon class="infoIcon">
              <InfoFilled />
            </el-icon>
          </li>
        </ul>
        <!-- 点击图标显示的dialog -->

        <!-- 底部 :兴趣技能-->
        <li @click="changeDialog  " >
          <span>兴趣爱好</span>
          <div class="">
            <Interest ref="interestRef" @click="closeHandler"></Interest>
          </div>
        </li>
        <!-- 保存按钮 -->
        <div class="infoSave">
          <el-button class="save" type="primary" @click="save" size="default">保存</el-button>
        </div>
      </div>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
// y引入仓库
import information from '@/store/modules/information'
import userInfo from '@/store/modules/userInfo'

import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
// 使用仓库
const informationStore = information()
const userInfoStore = userInfo()
const userSkill = ref('零基础')
const value = ref([])
const props = {
  expandTrigger: 'hover',
}
//这是兴趣爱好的弹框
const interestRef = ref();
const changeDialog = () => {
  interestRef.value.openHandler();
};
const dialogVisible= ref()
const closeHandler = ()=>{
  dialogVisible.value = false;
}
// 城市的数据
const options = [
  {
    value: '安徽',
    label: '安徽',
    children: [
      {
        value: '安庆',
        label: '安庆',
      },
      {
        value: '蚌埠',
        label: '蚌埠',
      },
      {
        value: '池州',
        label: '池州',
      },
      {
        value: '阜阳',
        label: '阜阳',
      },
      {
        value: '黄山',
        label: '黄山',
      },
      {
        value: '合肥',
        label: '合肥',
      },
      {
        value: '淮南',
        label: '淮南',
      },
      {
        value: '淮北',
        label: '淮北',
      },
      {
        value: '六安',
        label: '六安',
      },
      {
        value: '马鞍山',
        label: '马鞍山',
      },
      {
        value: '宿州',
        label: '宿州',
      },
      {
        value: '铜陵',
        label: '铜陵',
      },
      {
        value: '芜湖',
        label: '芜湖',
      },
      {
        value: '宣城',
        label: '宣城',
      },
      {
        value: '亳州',
        label: '亳州',
      },
    ],
  },
  {
    value: '北京',
    label: '北京',
    children: [
      {
        value: '北京',
        label: '北京',
      },
    ],
  },
  {
    value: '重庆',
    label: '重庆',
    children: [
      {
        value: '重庆',
        label: '重庆',
      },
    ],
  },
  {
    value: '福建',
    label: '福建',
    children: [
      {
        value: '福州',
        label: '福州',
      },
      {
        value: '龙岩',
        label: '龙岩',
      },
      {
        value: '宁德',
        label: '宁德',
      },
      {
        value: '南平',
        label: '南平',
      },
      {
        value: '泉州',
        label: '泉州',
      },
      {
        value: '三明',
        label: '三明',
      },
      {
        value: '厦门',
        label: '厦门',
      },
      {
        value: '漳州',
        label: '漳州',
      },
    ],
  },
  {
    value: '甘肃',
    label: '甘肃',
    children: [
      {
        value: '白银',
        label: '白银',
      },
      {
        value: '定西',
        label: '定西',
      },
      {
        value: '甘南',
        label: '甘南',
      },
      {
        value: '嘉峪关',
        label: '嘉峪关',
      },
      {
        value: '金昌',
        label: '金昌',
      },

      {
        value: '酒泉',
        label: '酒泉',
      },

      {
        value: '陇南',
        label: '陇南',
      },
      {
        value: '临夏',
        label: '临夏',
      },
      {
        value: '兰州',
        label: '兰州',
      },
      {
        value: '平凉',
        label: '平凉',
      },
      {
        value: '张掖',
        label: '张掖',
      },

    ],
  },
  {
    value: '广东',
    label: '广东',
    children: [
      {
        value: '广州',
        label: '广州',
      },
      {
        value: '佛山',
        label: '佛山',
      },
      {
        value: '珠海',
        label: '珠海',
      },
    ],
  },
  {
    value: '广西',
    label: '广西',
    children: [
      {
        value: '北海',
        label: '北海',
      },
      {
        value: '百色',
        label: '百色',
      },
      {
        value: '崇左',
        label: '崇左',
      },
      {
        value: '防城港',
        label: '防城港',
      },
      {
        value: '桂林',
        label: '桂林',
      },
      {
        value: '贵港',
        label: '贵港',
      },

      {
        value: '河池',
        label: '河池',
      },

      {
        value: '贺州',
        label: '贺州',
      },
      {
        value: '柳州',
        label: '柳州',
      },
      {
        value: '来宾',
        label: '来宾',
      },

      {
        value: '南宁',
        label: '南宁',
      },
      {
        value: '钦州',
        label: '钦州',
      },
      {
        value: '玉林',
        label: '玉林',
      },
    ],
  },
  {
    value: '贵州',
    label: '贵州',
    children: [
      {
        value: '安顺',
        label: '安顺',
      },
      {
        value: '毕节',
        label: '毕节',
      },
      {
        value: '贵阳',
        label: '贵阳',
      },
      {
        value: '六盘水',
        label: '六盘水',
      },
    ],
  },
  {
    value: '海南',
    label: '海南',
    children: [
      {
        value: '海口',
        label: '海口',
      },
      {
        value: '三亚',
        label: '三亚',
      },

    ],
  },
  {
    value: '河北',
    label: '河北',
    children: [
      {
        value: '保定',
        label: '保定',
      },
      {
        value: '张家口',
        label: '张家口',
      },
      {
        value: '石家庄',
        label: '石家庄',
      },
      {
        value: '邯郸',
        label: '邯郸',
      },
    ],
  },
  {
    value: '黑龙江',
    label: '黑龙江',
    children: [
      {
        value: '大庆',
        label: '大庆',
      },
      {
        value: '佳木斯',
        label: '佳木斯',
      },
      {
        value: '牡丹江',
        label: '牡丹江',
      },
      {
        value: '哈尔滨',
        label: '哈尔滨',
      },
    ],
  },
  {
    value: '河南',
    label: '河南',
    children: [
      {
        value: '安阳',
        label: '安阳',
      },
    ],
  },
  {
    value: '湖北',
    label: '湖北',
    children: [
      {
        value: '恩施',
        label: '恩施',
      },
      {
        value: '黄石',
        label: '黄石',
      },
    ],
  },
  {
    value: '黑龙江',
    label: '黑龙江',
    children: [
      {
        value: '大庆',
        label: '大庆',
      },
      {
        value: '佳木斯',
        label: '佳木斯',
      },
      {
        value: '牡丹江',
        label: '牡丹江',
      },
      {
        value: '哈尔滨',
        label: '哈尔滨',
      },
    ],
  },


]
// 表单
const info = ref({
  userName: '',//用户名
  Birthday: '',//生日
  gender: 'm',//性别
  city: {}, //城市
  growthLevel: '',//等级
  SkillLevels: '',//技能水平
})

// 发请求获取数据
onMounted(() => {
  // 获取城市
  informationStore.getCity()
  // 获取个人信息
  userInfoStore.getUserInfo()
  // 获取技能水平
  informationStore.getSkill()
})


// 性别的点击回调
const changeGender = () => {
  if (info.value.gender === 'f') {
    info.value.gender = 'm'
  } else {
    info.value.gender = 'f'
  }
}

// 保存 的回调
const save = async () => {
  informationStore.newName = userInfoStore.userInfo.account
  console.log(informationStore.newName);

  ElMessage({
    type: 'success',
    message: '保存成功'
  })
}

</script>

<style scoped>
.infoContainer {
  min-height: 600px;
  padding-top: 60px;
}

/* 头部放头像 */
.header {
  height: 120px;

}

.headerImg {
  height: 120px;
  width: 120px;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
}

.headerImg:hover {
  border: 2px solid #f8bed5;
  /* box-shadow:5px 5px 10px 5px black outset; */
}

.headerWord {
  height: 30px;
  width: 100%;
  text-align: center;
  line-height: 30px;
  color: #7D8090;
  font-size: 14px;
  /* margin: 10px; */
}

/* 中间部分 */
.middle {
  width: 100%;
  margin: 20px 140px;
  position: relative;
  padding: 20px 0;
}

.leftInfo {
  /* float: left; */
  margin-left: 40px;
  margin-right: 60px;

}

.middle ul li {
  width: 340px;
  height: 58px;
}

/* 左侧部分 */
.leftInfo li span {
  display: inline-block;
  width: 80px;
  height: 40px;
  line-height: 40px;
  /* text-align: left; */
  font-size: 13px;


}

.leftInfo li .infoInput {
  height: 40px;
  width: 160px;
  background-color: #f5f7f9;
  border-style: none;
  border: none;
}

.leftInfo li button {
  width: 70px;
  height: 30px;
  background-color: #f5f7f9;
  border-style: none;
  color: #000;
  margin-right: 10px;

}

.leftInfo li button.active {
  background-color: #f93684;
  color: #fff
}

/* level的样式 */
.level {
  position: relative;
}

.lv {
  /* display: inline; */
  height: 20px;
  width: 41px;
  background-color: #ff43d0;
  margin: 0 auto;
  border-radius: 4px;
  text-align: center;
  margin-top: 5px;
  font-style: oblique;
  font-weight: 600;
  font-size: 12px;
  color: white;
  line-height: 20px;
  position: absolute;
  top: 5px;
  left: 85px;

}

/* 右侧部分 */
.infoRightStyle {
  position: absolute;
  left: 330px;
  top: 20px;
}

/* 时间选择器 */
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  position: absolute;
  top: -25px;
  left: 22px;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

/* 技能水平选择器的样式 */
.skillOne {
  font-size: 14px;
}

.skillTwo {
  display: inline-block;
  /* float: right; */
  margin-left: 10px;
  font-size: 12px;

}

/* 技能水平后面的图标 */
.infoIcon {
  margin: 3px 10px;
}

/* 兴趣技能 */
.leftInfo.hobbySkill {
  width: 800px;
}

/* tag标签的样式 */
.leftInfo.hobbySkill span {
  width: 80px;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
}

.leftInfo.hobbySkill .skillTag {
  position: relative;
  width: 100px;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  /* margin: 0 10px; */
  margin-left: 22px;
}

.skillTag svg {
  position: absolute;
  top: -20px;
  right: -4px;
}

/* 兴趣技能的请选择按钮 */
.hobbySkill .selectButton {
  height: 35px;
  width: 80px;
  font-size: 14px;
  color: #bbbfc9;
  border-radius: 5px;
  border: none;
  margin: 0 10px;
  background-color: #f5f7f9;
}

/* 保存按钮 */
.save {
  background-color: #f93684;
  margin: 30px 270px 0;
  width: 140px;
  height: 46px;
  border: none;
  font-size: 12px;
  color: #fff;
}


.example-block {
  margin: -40px 81px;
  width: 220px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.dialog-footer button {
  background-color: #f93684;
  border: none;
}
</style>